<template>
  <div class="comLeft" v-if="detail">
    <div class="top">
      <dl>
        <dt>
          <img class="avatar" :src="detail.base_url+detail.himg" alt />
          <div class="hy">
            <img :src="huiyuan" alt />
          </div>
        </dt>
        <dd class="first">{{ detail.nickname}}</dd>
        <dd v-if="detail && detail.regi">
          <!-- 黑龙江哈尔滨 -->
          {{ codeToText[detail.regi[0]]
          }}{{
          codeToText[detail.regi[1]] == "市辖区"
          ? ""
          : "-" + codeToText[detail.regi[1]]
          }}-{{ codeToText[detail.regi[2]] }}
        </dd>
      </dl>
      <img :src="v2" alt />
    </div>
    <div class="cen">
      <h2>技能</h2>
      <div v-for="(item, index) in detail.skill" :key="index">
        {{ index + 1 }}.{{ item[0]}}
        <el-progress class="aa" :percentage="Number(item[1])" :stroke-width="10" :show-text="false"></el-progress>
      </div>
    </div>
    <div class="fot" v-if="$route.path == '/resume'">
      <el-button
        @click="winner()"
        style="width:100%;"
        type="primary"
        size="small"
      >{{ isBid === false || isBid === 'false' ? "中标" : "已投标" }}</el-button>
    </div>
    <!-- <el-dialog title="采纳提示" :visible.sync="isTrue" width="30%">
            <div>您确定采纳该方案为该项目的中标方案吗?</div>
            <el-link style="margin:14px 0;" type="warning"
                >注意该方案只能采纳一次,请慎重。</el-link
            >

            <span slot="footer" class="dialog-footer">
                <el-button @click="isTrue = false">取 消</el-button>
                <el-button type="primary" @click="isTrue = false"
                    >确 定</el-button
                >
            </span>
    </el-dialog>-->
  </div>
</template>

<script>
import usericon from "@/assets/images/resume/usericon.png";
import huiyuan from "@/assets/images/resume/huiyuan.png";
import v2 from "@/assets/images/resume/v1.png";
import { CodeToText } from "element-china-area-data";
export default {
  props: {
    // 后台获取回来的商户详细信息数据
    detail: {
      type: Object
    },
    // 是否已投标
    isBid: {
      type: [Boolean, String],
      default: false
    },
    merchantGuid: {
      type: String
    },
    taskGuid: {
      type: String
    }
  },
  created() {
    console.log(this.isBid);
  },
  data() {
    return {
      usericon,
      huiyuan,
      v2,
      isTrue: false,
      codeToText: CodeToText // 以code为键的大对象
    };
  },
  methods: {
    // 投标
    winner() {
      // 如果已经选了中标人，不操作
      if (this.isBid === true || this.isBid === "true")
        return this.$message({
          type: "success",
          message: "已投标"
        });
      this.$confirm(
        '<span style="font-weight:bold">您确定采纳该方案为该项目的中标方案吗？</span><br><span style="color: rgb(255,77,8)">注意方案只能采纳一次，请慎重！</span>',
        "采纳方案",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true
        }
      )
        .then(() => {
          this.$ajax
            .post("/userTask/chooseReply", {
              taskGuid: this.taskGuid,
              merchantGuid: this.merchantGuid
            })
            .then(res => {
              if (res.data.code == 0) {
                this.isBid = true;
                this.$message({
                  type: "success",
                  message: "选择成功!"
                });
              } else {
                this.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.comLeft {
  // width: 100%;
  padding: 40px 60px;
  background: #fff;
  border-radius: 12px;
  .top {
    dl {
      text-align: center;
    }
    > img {
      height: 60px;
      margin: 10px auto 20px;
      display: block;
    }

    dt {
      position: relative;
      text-align: center;
      height: 100px;
      display: inline-block;
      width: 100px;
      overflow: hidden;

      .avatar {
        border-radius: 50px;
        overflow: hidden;
        width: 100%;
        display: inline-block;
      }

      > img {
        width: 100%;
      }
      .hy {
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 100%;
        border: 4px solid #fff;
        img {
          height: 25px;
        }
      }
    }

    dd {
      // font:16px/24px '';
      font-size: 16px;
      line-height: 24px;
      color: #959494;
      text-align: center;
    }
    .first {
      color: #565656;
      font-weight: bold;
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .cen {
    h2 {
      // font: 20px/26px "";
      font-size: 20px;
      line-height: 26px;
      color: #565656;
      // margin-bottom: 20px;
    }
    > div {
      // font: 18px/24px "";
      font-size: 18px;
      line-height: 24px;
      color: #959494;
      padding-top: 20px;
      .aa {
        margin-top: 10px;
      }
    }
  }
  .fot {
    margin-top: 30px;
  }
}
</style>